<template>
<div id="Mine">
  <div style="height: 3.6rem; position: relative; overflow: hidden;">
    <img src="@/assets/img/main/bg.jpg" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;">
    <div style="width: 1.6rem; height: 1.6rem; margin: 0.6rem auto 0; position: relative; background: #FFFFFF; border-radius: 50%;">
      <img :src="'./logo.png'" style="width: 100%; height: 100%;">      
    </div>
    <div style="text-align: center; font-size: 0.36rem; margin-top: 0.3rem; color: #FFFFFF; position: relative;">{{$store.state.userInfo.userName}}({{$store.state.userInfo.userId}})</div>
  </div>
  <div style="height: 0.2rem; background: #f7f7f7;"></div>
  <div class="main-title" v-if="!$store.getters.ifKefu">
    <div class="main-title-icon"></div>
    <div class="main-title-text">金额管理</div>
  </div>
  <div style="height: 4rem; display: flex; flex-direction: column; justify-content: space-around; align-items: center;" v-if="!$store.getters.ifKefu">
    <!-- <div style="font-size: 0.5rem; color: #f6712e;">{{ totalShouru.numberFormat() }}/{{ totalRevenue.numberFormat() }}</div>
    <div style="font-size: 0.24rem; color: #2C3E50;">总收益</div> -->
    <div style="font-size: 1rem; color: #f6712e;">{{ totalRevenue }}</div>
    <div style="font-size: 0.24rem; color: #2C3E50;">总收益(元)</div>
    <div class="flex-bottom-box">
      <div class="flex-bottom-item" v-for="item in liushui" :key="item.key">
        <div class="flex-bottom-top">{{ item.value }}</div>
        <div class="flex-bottom-bottom">{{ item.name }}</div>
      </div>
    </div>
  </div>
  <div style="height: 0.2rem; background: #f7f7f7;"></div>
  <div class="main-title">
    <div class="main-title-icon"></div>
    <div class="main-title-text">应用功能</div>
  </div>
  <div class="func-box">
    <div class="func-item" v-for="item in funcList" :key="item.key" @click="funcItem( item.key )">
      <img class="func-img" :src="`./static/img/${item.icon}.png`">
      <div class="func-name">{{ item.name }}</div>
    </div>
  </div>

  <van-action-sheet v-model="showAction" :actions="actions" @select="selectAction" cancel-text="取消" @cancel="showAction = false"/>

  <van-dialog v-model="showSncode.blank" title="设备回收" show-cancel-button @confirm="submitSncode">
    <van-cell-group>
      <van-radio-group v-model="showSncode.type" style="display: flex; padding: 10px 0 10px 30px;">
        <van-radio name="1">机柜</van-radio>
        <van-radio name="2" style="margin-left: 20px;">充电宝</van-radio>
      </van-radio-group>
      <van-field v-model="showSncode.code" placeholder="请输入" label="设备编号"/>
    </van-cell-group>
  </van-dialog>

  <van-popup v-model="plBlank" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar title="订单设置" left-arrow @click-left="plBlank = false"/>
      <van-field v-model="plForm.dayMinOrder" required label="最低单数" placeholder="请输入"/>
      <van-field v-model="plForm.loseOrder" required label="均摊间隔" placeholder="请输入"/>
      <van-field v-model="plForm.loseOrderNum" required label="连续均摊数" placeholder="请输入"/>
      <van-field readonly clickable label="开始时间" :value="plForm.startTime" required placeholder="请选择" @click="riqi.showBlank()"/>
      <van-field readonly clickable label="开关" :value="status.name[plForm.status]" required placeholder="请选择" @click="status.show = true"/>
     
      <van-tabs v-model="plactive" v-if="$store.state.userInfo.roleType == 0" @change="() => { plchecked = [] }">
        <van-tab title="代理"></van-tab>
        <van-tab title="商户"></van-tab>
      </van-tabs>
      <!-- <div style="height: 0.3rem;"></div> -->
      <div style="height: 0.8rem; display: flex; justify-content: center; align-items: center;">
        <van-button color="#18a3dc" size="small" @click="changeCheck(true)">全选</van-button>
        <van-button color="#18a3dc" size="small" @click="changeCheck(false)" style="margin-left: 0.5rem">全否</van-button>
      </div>
      <div class="flex-body" style="background: #FFF; font-size: 0.32rem;">
        <van-checkbox-group v-model="plchecked" ref="checkbox">
          <van-checkbox v-for="item in userList" :key="item.userId" :name="item.userId" style="margin: 0.1rem 0 0.1rem 0.3rem;">{{ item.nick }}（{{ item.phone }}）</van-checkbox>
        </van-checkbox-group>
      </div>
      <div style="height: 1rem; display: flex; justify-content: center; align-items: center;">
        <van-button round type="info" size="small" style="height: 0.8rem;" :loading="submitLoading" @click="submitPL">保 存</van-button>
      </div>
    </div>
  </van-popup>
  <van-popup v-model="status.show" position="bottom">
    <van-picker show-toolbar :columns="status.columns" @cancel="status.show = false" @confirm="status.confirm"/>
  </van-popup>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';
import { formatDate } from '@/utils/common';
declare const wx: any;

@Component
export default class app extends Vue {

  totalRevenue: number = 0
  totalShouru: number = 0

  liushui: any = [
    { name: '已提现金额(元)', value: 0, key: 'haveWithdrawalAmount' },
    { name: '待审核金额(元)', value: 0, key: 'amountToBeAudited' },
    { name: '可提现金额(元)', value: 0, key: 'cashWithdrawalAmount' }
  ]

  funcList: any = [

    { name: '申请提现', icon: 'f1', key: 'tx-shengqing', role: [ 1, 3 ] },
    { name: '提现审批', icon: 'f2', key: 'tx-shengpi', role: [ 0 ] },
    { name: '提现记录', icon: 'f3', key: 'tx-jilu', role: [ 0, 1, 3 ] },
    { name: '修改密码', icon: 'f4', key: 'mima', role: [ 0, 1, 2, 3 ] },

    { name: '添加门店', icon: 'f5', key: 'mendian', role: [ 0, 1, 2 ] },
    { name: '添加角色', icon: 'f6', key: 'juese', role: [ 0, 1, 2 ] },
    { name: '特殊用户', icon: 'f7', key: 'yonghu', role: [ 0, 1, 2 ] },
    { name: '添加特殊用户', icon: 'f8', key: 'teshu', role: [ 0, 1, 2 ] },

    { name: '商户', icon: 'f9', key: 'shanghu', role: [ 0, 1, 2 ] },
    { name: '业务员', icon: 'f10', key: 'yewuyuan', role: [ 0, 1 ] },
    { name: '代理', icon: 'f11', key: 'daili', role: [ 0, 1 ] },
    { name: '渠道商', icon: 's3', key: 'qudao', role: [ 0, 1 ] },
    { name: '用户留言', icon: 'f12', key: 'liuyan', role: [ 0 ] },

    { name: '出入库', icon: 'f15', key: 'Churu', role: [ 0, 1 ] },
    { name: '设备回收', icon: 'f18', key: 'Huishow', role: [ 0, 1 ] },
    { name: '业务员备件库', icon: 'f19', key: 'Beijian', role: [ 0, 1 ] },

    { name: '门店分类', icon: 'f16', key: 'MendianType', role: [ 0 ] },

    { name: '业务员业绩', icon: 'f10', key: 'yewuyuanYJ', role: [ 0, 1 ] },

    { name: '认证信息', icon: 'f13', key: 'RzInfo', role: [ 0, 1, 2, 3 ] },

    { name: '增长趋势', icon: 'f17', key: 'QuShi', role: [ 0 ] },
    { name: '批量均摊', icon: 'f15', key: 'PiLiang', role: [ 0, 1 ] },

    { name: '退出登录', icon: 'f14', key: 'tuichu', role: [ 0, 1, 2, 3 ] }

  ]

  funcItem(key: any) {
    switch(key) {
      case 'tx-shengqing':
        this.$router.push('TxSq');
      break;
      case 'tx-shengpi':
        this.$router.push('TxSp');
      break;
      case 'tx-jilu':
        this.$router.push('TxJl');
      break;
      case 'mima':
        this.$router.push('ResetPass');
      break;
      case 'mendian':
        this.$router.push('AddMendian');
      break;
      case 'juese':
        this.$router.push('AddJuese');
      break;
      case 'yonghu':
        this.$router.push('SupList');
      break;
      case 'teshu':
        this.$router.push('AddSup');
      break;
      case 'shanghu':
        this.$router.push('ShopList');
      break;
      case 'yewuyuan':
        this.$router.push('YewuList');
      break;
      case 'yewuyuanYJ':
        this.$router.push('yewuyuanYJ');
      break;
      case 'daili':
        this.$router.push('DailiList');
      break;
      case 'liuyan':
        this.$router.push('Liuyan');
      break;
      case 'RzInfo':
        this.$router.push('RzInfo');
      break;
      case 'tuichu': 
        axios.post('/api/login/wxWebLogout').then((res: any) => this.$store.commit('exit'));
      break;
      case 'Churu': 
        this.$router.push('ChuruList');
      break;
      case 'MendianType': 
        this.$router.push('MendianType');
      break;
      case 'QuShi': 
        this.$router.push('QuShi');
      break;
      case 'Huishow': 
        this.showAction = true;
      break;
      case 'Beijian': 
        this.$router.push('Beijian');
      break;
      case 'qudao': 
        this.$router.push('QudaoList');
      break;
      case 'PiLiang': 
        this.showplBlank();
      break;
    }
  }

  plBlank: any = false
  plactive: any = 0
  plForm: any = {}
  plchecked: any = []
  shopUserList: any = []
  dailiList: any = []
  showplBlank() {
    this.plchecked = [];
    if (this.shopUserList.length == 0) {
      this.getShopUserList();
    }
    if (this.dailiList.length == 0 && this.$store.state.userInfo.roleType == 0) {
      this.getDailiList();
    }
    if (this.$store.state.userInfo.roleType != 0) {
      this.plactive = 1;
    } else {
      this.plactive = 0;
    }
    this.plForm = {  dayMinOrder: 10, loseOrder: 10, loseOrderNum: 1, startTime: formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss'), status: 0  }
    this.plBlank = true;
  }
  status: any = {
    show: false,
    columns: [
      { value: 0, text: '开' },
      { value: 1, text: '关' },
    ],
    name: [ '开', '关' ],  
    confirm: (option: any) => {
      let detail = JSON.parse(JSON.stringify(this.plForm));
      detail.status = option.value;
      this.plForm = detail;
      this.status.show = false;
    }
  }
  changeCheck(type: any) {
    let checkbox: any = this.$refs.checkbox;
    checkbox.toggleAll(type);
  }
  getDailiList() {
    let query: any = { page: 1, size: 1000, userId: this.$store.state.userInfo.userId, roleType: 1 };
    axios.get('/api/roleController/getUserAllSubordinate', query).then((res: any) => {      
      let list = res.list || [];
      this.dailiList = list;
    });
  }
  getShopUserList() {
    let query: any = { page: 1, size: 1000, userId: this.$store.state.userInfo.userId, roleType: 3 };
    axios.get('/api/roleController/getUserAllSubordinate', query).then((res: any) => {      
      let list = res.list || [];
      this.shopUserList = list;
    });
  }
  submitLoading: any = false
  submitPL() {
    console.log(this.plchecked);
    let detail = JSON.parse(JSON.stringify(this.plForm));
    if (isNaN(detail.dayMinOrder)) { this.$toast('最低单数需要输入数字！'); return; }
    if (isNaN(detail.loseOrder)) { this.$toast('均摊间隔需要输入数字！'); return; }
    if (this.plchecked.length == 0) { this.$toast('请选择设置均摊的用户'); return; }
    this.submitLoading = true;
    let data = this.plchecked.map((userId: any) => {
      return {
        ...detail,
        userId
      };
    });
    axios.post('/api/hideOrder/batch', data).then((res: any) => {
      this.submitLoading = false;
      this.$toast('保存成功');
    }).catch(() => {
      this.submitLoading = false;
    });
  }
  get userList() {
    let list: any = [];
    if (this.plactive == 0) {
      list = JSON.parse(JSON.stringify(this.dailiList));
    } else {
      list = JSON.parse(JSON.stringify(this.shopUserList));
    }
    return list;
  }

  showAction: any = false
  actions: any = [
    { name: '手动输入' },
    { name: '扫码回收' }
  ]
  selectAction(obj: any) {
    this.showAction = false;
    if( obj.name == '扫码回收' ) {
      this.Huishow();
    } else {
      this.shoudong();
    }
  }
  showSncode: any = {
    blank: false,
    type: '1',
    code: ''
  }
  submitSncode() {
    if( this.showSncode.code ) {
      this.inState( this.showSncode.code, this.showSncode.type );
    } else {
      this.$toast('请输入正确的设备编号');
    }
  }
  shoudong() {
    this.showSncode.code = '';
    this.showSncode.blank = true;
  }
  Huishow() {
    let config = this.$store.state.config;
    wx.config({ ...config, debug: false, jsApiList: [ 'scanQRCode', 'chooseImage', 'uploadImage', 'getLocation', 'openLocation' ] });
    wx.scanQRCode({
      needResult: 1, 
      scanType: [ "qrCode" ], 
      success: (res: any) => {
        let result = res.resultStr; 
        if ( result.indexOf('dianxiaotong') > -1 ) {
          let sn = result.split('=')[1];
          if ( isNaN( sn[0] ) ) {
            axios.get('/api/chargerPlaEquipmentController/getSnById', {
              id: result.split('=')[1]
            }).then((res: any) => {
              this.inState( res, 1 );
            });
          } else {
              this.inState( sn, 1 );
          }
        } else {
          if ( result.indexOf('=')>0 ) {
            this.inState( result.split('=')[1], 2 );
          } else {
            this.inState( result, 2 );
          }
        }
      }
    });
  }
  inState( sn: any, type: any ) {
    axios.delete('/api/bjk/retrieve', { sn, type }).then((res: any) => {
      this.$toast('设备回收成功');
      // this.Huishow();
    });
  }

  created() {
    let roleType = this.$store.state.userInfo.roleType;
    let funcList = this.funcList.filter((item: any) => item.role.indexOf( roleType ) > -1);
    this.funcList = funcList.filter((item: any) => { 
      if( item.key == 'tx-shengqing' ) { return this.$store.state.userInfo.role.withdraw == 0; }
      else if( item.key == 'PiLiang' ) { return this.$store.state.userInfo.roleType == 0 || this.$store.state.userInfo.role.choudan == 1; }
      else return true; 
    });
    if (this.$store.getters.ifKefu) {
      this.funcList = [
        { name: '修改密码', icon: 'f4', key: 'mima', role: [ 0, 1, 2, 3 ] },
        { name: '用户留言', icon: 'f12', key: 'liuyan', role: [ 0 ] },
        { name: '出入库', icon: 'f15', key: 'Churu', role: [ 0, 1 ] },
        { name: '设备回收', icon: 'f18', key: 'Huishow', role: [ 0, 1 ] },
        { name: '业务员备件库', icon: 'f19', key: 'Beijian', role: [ 0, 1 ] },
        { name: '门店分类', icon: 'f16', key: 'MendianType', role: [ 0 ] },
        { name: '认证信息', icon: 'f13', key: 'RzInfo', role: [ 0, 1, 2, 3 ] },
        { name: '退出登录', icon: 'f14', key: 'tuichu', role: [ 0, 1, 2, 3 ] }
      ]
    }
    axios.get('/api/orderFormController/getUserByMoneyManage',{
      userId: this.$store.state.userInfo.userId
    }).then((res: any) => {
      if (this.$store.state.userInfo.userId === 10000) {
        res.haveWithdrawalAmount = 4100000;
      }
      let totalShouru = 0;
      this.liushui.forEach((ele: any) => {
        ele.value = res[ ele.key ] || 0
        totalShouru += ele.value;
      });
      this.totalRevenue = res.totalRevenue || 0;
      this.totalShouru = totalShouru || 0;
    })
  }
  
};
</script>

<style lang="scss">
#Mine {
  .main-title { 
    height: 0.6rem; 
    display: flex; 
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    .main-title-icon {
      width: 0.06rem;
      height: 0.3rem;
      background: #18a3dc;
      margin-left: 0.4rem;
    }
    .main-title-text {
      font-size: 0.3rem;
      color: #4d4d4d;
      margin-left: 0.3rem;
    }
  }
  .flex-bottom-box {
    width: 100%; 
    height: 0.84rem; 
    display: flex; 
    flex-direction: row;
    .flex-bottom-item {
      width: 33%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .flex-bottom-top {
        font-size: 0.36rem;
        color: #18a3dc;
      }
      .flex-bottom-bottom {
        font-size: 0.24rem;
        color: #666666;
      }
    }
  }
  .func-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 0.2rem;
    .func-item {
      width: 25%;
      height: 1.6rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .func-img {
        height: 0.46rem;
        margin-bottom: -0.1rem;
      }
      .func-name {
        font-size: 0.24rem;
        color: #4d4d4d;
        margin-top: -0.1rem;
      }
    }
  }
}
</style>

